<template>
  <div class="form">
    <el-upload
      :class="[{ uploadNotEmpty: data.images.length }, 'upload']"
      ref="upload"
      :action="uploadUrl"
      :data="uploadParams"
      :headers="uploadHeaders"
      :show-file-list="false"
      accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
      :on-success="
        (response, file, fileList) =>
          uploadSuccess(response, data.images.length)
      "
      :on-error="uploadError"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <div :class="[{ notEmpty: data.images.length }, 'imageList']">
      <div class="image" v-for="(image, index) in data.images" :key="index">
        <el-image :src="image.url" fit="fill"></el-image>
        <div class="operate">
          <i @click="uploadRemove(image)" class="el-icon-delete"></i>
          <div class="add">
            <el-upload
              :action="uploadUrl"
              :data="uploadParams"
              :headers="uploadHeaders"
              :show-file-list="false"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
              :on-success="
                (response, file, fileList) => uploadSuccess(response, index)
              "
              :on-error="uploadError"
            >
              <i class="el-icon-plus prev">当前图片之前添加</i>
            </el-upload>
            <el-upload
              :action="uploadUrl"
              :data="uploadParams"
              :headers="uploadHeaders"
              :show-file-list="false"
              accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
              :on-success="
                (response, file, fileList) => uploadSuccess(response, index + 1)
              "
              :on-error="uploadError"
            >
              <i class="el-icon-plus next">当前图片之后添加</i>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productFormMixins from "@/views/base/productForm";
import constants from "@/api/constants";
import userUtils from "@/utils/userUtils";
import jsonUtils from "@/utils/jsonUtils";

export default {
  name: "spuUpdateDescForm",
  mixins: [productFormMixins],
  props: ["spuInfo"],
  data() {
    return {
      uploadUrl: constants.baseURL + "/thirdparty/upload",
      uploadParams: {
        type: "image",
        directory: "product",
      },
      uploadHeaders: {
        "x-auth-token": userUtils.getToken(),
      },
      init: {
        images: [],
      },
      data: {
        images: [],
      },
    };
  },
  methods: {
    initData() {
      if (this.spuInfo.descs) {
        this.data.images = jsonUtils.deepCopy(this.spuInfo.descs);
      }
    },
    uploadRemove(image) {
      this.data.images = this.data.images.filter(
        (item) => item.sn !== image.sn
      );
    },
    uploadSuccess(response, postion) {
      if (null != response && response.code == 200) {
        this.data.images.splice(postion, 0, response.data);
      } else {
        this.$message.error(response.msg);
      }
    },
    uploadError(err, file, fileList) {
      this.$message.error("上传文件失败");
    },
    getData() {
      var images = jsonUtils.deepCopy(this.data.images);
      // 设置图片排序
      var initSort = 100;
      images.forEach((image) => {
        image.sort = initSort++;
      });
      return images;
    },
  },
};
</script>

<style lang="less" scoped>
.form {
  overflow: auto;
  height: 60vh;
  .upload {
    width: 100px;
    height: 100px;
    border: 1px solid #efefef;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    margin-left: 50px;
  }
  .uploadNotEmpty {
    margin-left: 770px;
    position: absolute;
    top: 180px;
  }
  .notEmpty {
    border: 1px solid #efefef;
  }
  .imageList {
    width: 751px;
    .image {
      position: relative;
      border: 1px solid #fff;
      .el-image {
        width: 750px;
      }
      .operate {
        width: 730px;
        padding: 10px;
        position: absolute;
        top: 0px;
        left: 0px;
        background: rgba(239, 239, 239, 0.5);
        display: flex;
        justify-content: space-between;
        i {
          color: #aaa;
          cursor: pointer;
        }
        i:hover {
          color: #409eff;
        }
        .add {
          display: flex;
          .prev,
          .next {
            font-size: 14px;
          }
          .prev {
            margin-right: 30px;
          }
        }
      }
    }
    .image:hover {
      border: 1px solid #409eff;
    }
  }
}
</style>